<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <el-form :model="queryParams" ref="queryForm" inline>
      <el-form-item label="科室ID">
        <el-input v-model="queryParams.departmentId" placeholder="请输入科室ID" clearable />
      </el-form-item>
      <el-form-item label="疾病ID">
        <el-input v-model="queryParams.diseaseId" placeholder="请输入疾病ID" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table :data="list" border>
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="departmentName" label="科室名称" />
      <el-table-column prop="diseaseName" label="疾病名称" />
      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="500px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="科室ID" prop="departmentId">
          <el-input v-model="form.departmentId" placeholder="请输入科室ID" />
        </el-form-item>
        <el-form-item label="疾病ID" prop="diseaseId">
          <el-input v-model="form.diseaseId" placeholder="请输入疾病ID" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDepartdisease,
  getDepartdisease,
  addDepartdisease,
  updateDepartdisease,
  delDepartdisease
} from '@/api/hospital/departdisease'

export default {
  name: 'DepartmentDisease',
  data() {
    return {
      list: [],       // 表格数据
      total: 0,       // 总条数
      title: '',      // 弹窗标题
      open: false,    // 弹窗显示控制
      queryParams: {  // 查询条件
        pageNum: 1,
        pageSize: 10,
        departmentId: null,
        diseaseId: null
      },
      form: {}        // 表单对象
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      listDepartdisease(this.queryParams).then(res => {
        this.list = res.rows
        this.total = res.total
      })
    },
    /** 搜索 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置 */
    resetQuery() {
      this.queryParams = { pageNum: 1, pageSize: 10 }
      this.getList()
    },
    /** 新增按钮 */
    handleAdd() {
      this.form = {}
      this.open = true
      this.title = '新增科室-疾病关联'
    },
    /** 编辑按钮 */
    handleUpdate(row) {
      getDepartdisease(row.id).then(res => {
        this.form = res.data
        this.open = true
        this.title = '修改科室-疾病关联'
      })
    },
    /** 提交表单 */
    submitForm() {
      if (this.form.id) {
        updateDepartdisease(this.form).then(() => {
          this.$message.success('修改成功')
          this.open = false
          this.getList()
        })
      } else {
        addDepartdisease(this.form).then(() => {
          this.$message.success('新增成功')
          this.open = false
          this.getList()
        })
      }
    },
    /** 删除按钮 */
    handleDelete(row) {
      this.$confirm('确认删除该条数据吗？', '提示', { type: 'warning' }).then(() => {
        delDepartdisease(row.id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {})
    }
  }
}
</script>
